<template>
  <div class="c">
    <div class="input-area">
      <el-input ref="input" class="input" v-model="value" disabled></el-input>
      <span class="btn" @click="copy()">{{ t("复制") }}</span>
    </div>
    <p class="p1">{{ t("已邀请人数", { num: 3 }) }}</p>
    <p class="p2">{{ t("优惠券数量", { num: 3 }) }}</p>
  </div>
</template>
<script>
import i18n from "@/i18n";
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  mounted() {},
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     * @param {Object} opt 其他参数
     */
    t(v, opt) {
      if (opt) {
        return i18n.t(`我的页面.${v}`, opt);
      }
      return i18n.t(`我的页面.${v}`);
    },
    copy() {
      navigator.clipboard
        .writeText(this.value)
        .then(() => {
          this.$message.success(this.t("复制成功"));
        })
        .catch((err) => {
          // 如果用户没有授权，则抛出异常
          this.$message.warning(this.t("复制失败"));
        });
    },
  },
};
</script>
<style lang="less" scoped>
.c {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0px;

  .input-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    .input {
      text-align: center;

      /deep/ input {
        text-align: center;
        color: #000;
        font-size: 18px;
      }
    }

    .btn {
      width: 80px !important;
      height: 55px;
      margin-left: 14px;
      //   width: fit-content;
      //   padding: 10px 0px;
      background: #000;
      border-radius: 10px;
      color: #fff;
      font-size: 18px;
      text-align: center;
    }
  }

  .p1 {
    margin-top: 40px;
  }
}
</style>
